<template>
  <BaseModal ref="modalRef" @on-modal-cancel="modalCancel" @on-modal-ok="modalOK">
    <template #titleArea>IP/PDK </template>
    <template #contentArea>
      <BaseTablePagination :columns="columns" :scroll="{ x: 1000 }" :toolbar="{ isTabbar: false }" :table-data="tableData">
        <template #actionColumn="{ scope }">
          <a-button type="link" @click.stop="onDetails(scope.row, data.name)">详情</a-button>
        </template>
      </BaseTablePagination>
    </template>
  </BaseModal>
</template>

<script setup lang="ts">
import BaseModal from "@/components/Basics/BaseModal.vue"
import BaseTablePagination from "@/components/Basics/BaseTablePagination.vue"
const modalRef = ref()
const showModal = (): void => {
  modalRef.value.setOpen()
}
const modalOK = () => {
  modalRef.value.setCloes()
}
const modalCancel = () => {
  modalRef.value.setCloes()
}
const columns = reactive([
  { title: "序号", dataIndex: "id", key: "id" },
  { title: "模型名称（编号）", dataIndex: "name", key: "name" },
  { title: "核心功能指标描述", dataIndex: "desc", key: "owner" },
  { title: "工艺(Foundry)", dataIndex: "workmanship", key: "workmanship" },
  { title: "节点", dataIndex: "node", key: "node" },
  { title: "当前等级", dataIndex: "currentLevel", key: "currentLevel" },
  { title: "一级分类", dataIndex: "primaryClassification", key: "primaryClassification" },
  { title: "二级分类", dataIndex: "secondaryClassification", key: "secondaryClassification" },
  { title: "三级分类", dataIndex: "threeLevelClassification", key: "threeLevelClassification" },
  { title: "操作", dataIndex: "action", key: "action" },
])
interface dataType {
  id: number
  name: string
  desc: string
  workmanship: string
  node: string
  currentLevel: string
  primaryClassification: string
  secondaryClassification: string
  threeLevelClassification: string
  [props: string]: any
}
const data: dataType = {
  id: 1,
  name: "x",
  desc: "x",
  workmanship: "x",
  node: "x",
  currentLevel: "x",
  primaryClassification: "x",
  secondaryClassification: "x",
  threeLevelClassification: "x",
}
const tableData = reactive([])
const onDetails = (row: any) => {
  console.log(row)
}
defineExpose({
  showModal,
})
</script>
<style scoped lang="less">
.contents-list {
  flex: 1 1 50%;
  padding: 0 10px;
  border-right: 1px solid #e8e8e8;
  .layout-checklist__title {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.47;
  }
  .layout-checklist-list {
    // overflow-y: scroll;
    max-height: 40vh;
    &::-webkit-scrollbar {
      width: 0;
    }
  }
}
.contents-checked {
  flex: 1 1 50%;
  padding: 0px 10px;
  .layout-checklist__title {
    .layout-checklist__title_span {
      color: #909090;
    }
  }
  .layout-checklist-list {
    // overflow-y: scroll;
    max-height: 40vh;

    &::-webkit-scrollbar {
      width: 0;
    }
  }
}
</style>
<style scoped>
:deep(.ant-checkbox-wrapper) {
  display: flex;
  margin-left: 0;
}
</style>
